<template>
  <view class="bjys">
    <view @click="navigateBtn()" class="play_back">
      <image src="@/static/img/play_back.png" mode=""></image>
    </view>
    <view class="icon-img">
      <img src="https://www.tmtv777.com/img/reglogin.jpg" alt="">
    </view>
    <view class="userlist">
      <view class="userlist_d" @click="changeBtn(1)">
        <p class="userlist_p">登录</p>
        <p class="user_heng" v-if="num == 1"></p>
      </view>
      <view class="userlist_d" @click="changeBtn(2)">
        <p class="userlist_p">注册</p>
        <p class="user_heng" v-if="num == 2"></p>
      </view>
    </view>

    <view class="u_collect" v-if="num == 1">
      <view class="u_collect_inp">
        <image class="u_img" src="@/static/img/buy.png" mode=""></image>
        <input type="text" maxlength="20" placeholder="请输入用户名" v-model="userName" />
      </view>
      <view class="u_collect_inp">
        <image class="u_img" src="@/static/img/card.png" mode=""></image>
        <input :type="type" maxlength="20" placeholder="请输入密码" v-model="password" />
        <image @click="change()" class="u_img2" src="@/static/pass2.png" mode=""></image>
      </view>
      <button class="button" @click="loginBtn(1)">立即登录</button>
    </view>
    <view class="u_collect" v-if="num == 2">
      <view class="u_collect_inp">
        <image class="u_img" src="@/static/img/buy.png" mode=""></image>
        <input type="text" maxlength="20" placeholder="用户名(6-11位数字英文)" v-model="userName" />
      </view>
      <view class="u_collect_inp">
        <image class="u_img" src="@/static/img/card.png" mode=""></image>
        <input :type="type2" maxlength="20" placeholder="请输入密码(6-11位数字英文)" v-model="password" />
        <image @click="change2()" class="u_img2" src="@/static/pass2.png" mode=""></image>
      </view>
      <view class="u_collect_inp">
        <image class="u_img" src="@/static/img/yqm.png" mode=""></image>
        <input type="text" maxlength="20" placeholder="输入邀请码" v-model="code" />
      </view>
      <button class="button" @click="loginBtn(2)">立即注册</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userName: '',
        num: 1,
        code: '', // 邀请码
        password: '',
        type: 'password',
        type2: 'password',
      }
    },
    methods: {
      change() {
        if (this.type == 'text') {
          this.type = 'password';
          return;
        }
        this.type = 'text';
      },
      change2() {
        if (this.type2 == 'text') {
          this.type2 = 'password';
          return;
        }
        this.type2 = 'text';
      },
      navigateBtn() {
        uni.navigateBack();
      },
      changeBtn(type) {
        this.num = type;
      },
      /**
       * 登录
       */
      loginBtn(index) {
        if (!this.userName || !this.password) {
          this.$toast('请填写信息');
          return;
        }
        if (index == 2) {
          this.$http.reg({
            phone: this.userName,
            pass: this.password,
            yqm: this.code
          }).then(res => {
            console.log(res, 123)
            if (res.code == 200) {
              this.$http.login({
                phone: this.userName,
                pass: this.password
              }).then(res => {
                if (res.code == 200) {
                  uni.setStorageSync('token', res.utoken);
                  uni.setStorageSync('share', res.share);
                  uni.setStorageSync('phone', this.userName);
                  this.$toast('注册成功')
                  uni.switchTab({
                    url: '../my/index'
                  })
                }
              })
            }
          }).catch(err => {
            this.$toast(err.msg)
          })
        } else {
          this.$http.login({
            phone: this.userName,
            pass: this.password
          }).then(res => {
            if (res.code == 200) {
              uni.setStorageSync('token', res.utoken);
              uni.setStorageSync('share', res.share);
              uni.setStorageSync('phone', this.userName);
              this.$http.collect({
                token: this.userName
              }).then(res => {
                if (res.code == 200) {
                  let collect = res.data.collectlist;
                  let list = [];
                  collect.forEach((item, index) => {
                    list.push(item.vod_id)
                  })
                  uni.setStorageSync('vod_id', list);
                }
              })
              this.$toast('登录成功')
              uni.switchTab({
                url: '../my/index'
              })
            } else {
              this.$toast(res.msg)
            }
          }).catch(err => {
            this.$toast(err.msg)
            console.log(err)
          })
        }

      },
      /**
       * 注册
       */
      regBtn() {

      }
    }
  }
</script>
<style>
  page {
    background-color: #f9faff;
  }
</style>
<style lang="less">
  .icon-img {
    width: 160rpx;
    height: 160rpx;
    margin: 120rpx auto 0;

    img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
    }
  }

  .userlist {
    display: flex;
    justify-content: center;
    margin: -60rpx auto 0;
    width: 94%;
    height: 200rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    box-shadow: 0 4px 10px #e6e7e8;

    .userlist_d {
      margin-top: 30rpx;
      flex: 1;
      height: 100%;

      .userlist_p {
        color: #4f5e6d;
        font-size: 38rpx;
        text-align: center;
        line-height: 105rpx;
        font-weight: bold;
      }

      .user_heng {
        border-bottom: 8rpx solid #364758;
        display: block;
        width: 15%;
        margin: auto;
        border-radius: 50rpx;
      }

    }
  }

  .u_collect {
    background-color: #fff;
    width: 94%;
    margin: 30rpx auto 0;
    border-radius: 20rpx;
    padding: 20rpx 0 10px 0;
    -webkit-box-shadow: 0 4rpx 10rpx #e6e7e8;
    box-shadow: 0 4rpx 10rpx #e6e7e8;
    overflow: hidden;

    .u_collect_inp {
      // margin-top: 20rpx;
      display: flex;
      height: 80rpx;
      justify-content: flex-start;
      align-items: center;
      background-color: #fff;
      padding-bottom: 10rpx;
      // border-bottom: 1rpx solid #B2B9BE;


      .u_img {
        margin-left: 15rpx;
        margin-right: 15rpx;
        width: 44rpx;
        height: 40rpx;
      }

      .u_img2 {
        margin-left: 214rpx;
        width: 44rpx;
        height: 44rpx;
      }

    }

    .button {
      margin-top: 20rpx;
      border-radius: 30rpx;
      width: 30%;
      color: #FFFFFF;
      background: #4a4c5b;
      text-align: center;
      height: 72rpx;
      line-height: 72rpx;
      font-size: 32rpx;

    }
  }
</style>
